<template>
  <div class="health-progress-chart" ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

const chartContainer = ref(null);
let chart = null;

const healthData = {
  indicators: ['国民体质合格率', '健康知识普及率'],
  baseline2019: [87.2, 62.5],
  current2023: [90.1, 75.3],
  target2030: [92.5, 85.0],
  policies: ['🏃‍♂️ 全民健身计划', '📢 健康素养促进行动'],
  significance: ['提升劳动力质量', '降低医疗支出']
};

const initChart = () => {
  if (!chartContainer.value) return;
  
  chart = echarts.init(chartContainer.value);
  
  const option = {
    title: {
      text: '全国健康指标进度（2019基线 vs 2025当前 vs 2030目标）',
      textStyle: {
        color: '#32ccee',
        fontSize: 14
      },
      left: 'center',
      top: 5
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        const dataIndex = params[0].dataIndex;
        return `${healthData.indicators[dataIndex]}<br/>
               2019基线: ${healthData.baseline2019[dataIndex]}%<br/>
               2025当前: ${healthData.current2023[dataIndex]}%<br/>
               2030目标: ${healthData.target2030[dataIndex]}%<br/>
               政策: ${healthData.policies[dataIndex]}<br/>
               意义: ${healthData.significance[dataIndex]}`;
      }
    },
    grid: {
      left: '15%',
      right: '10%',
      top: '12%',
      bottom: '8%'
    },
    xAxis: {
      type: 'value',
      min: 50,
      max: 100,
      axisLabel: {
        color: '#fff',
        formatter: '{value}%',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'category',
      data: healthData.indicators,
      axisLabel: {
        color: '#fff',
        fontSize: 12,
        padding: [0, 20, 0, 0],
        formatter: function (value) {
          return value.split('').join('\n');
        }
      }
    },
    series: [
      {
        name: '2023年当前值',
        type: 'bar',
        stack: 'total',
        data: healthData.current2023,
        itemStyle: {
          color: function(params) {
            return params.dataIndex === 0 ? '#1E90FF' : '#2E8B57';
          }
        },
        label: {
          show: true,
          position: 'inside',
          formatter: '{c}%',
          color: '#fff'
        }
      },
      {
        name: '剩余差距',
        type: 'bar',
        stack: 'total',
        data: healthData.target2030.map((target, index) => target - healthData.current2023[index]),
        itemStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    ],
    markLine: {
      data: [
        {
          name: '2019基线',
          xAxis: 87.2,
          lineStyle: {
            color: '#FF8C00',
            type: 'dashed'
          },
          label: {
            formatter: '2019基线: {c}%',
            color: '#FF8C00',
            fontSize: 10
          }
        },
        {
          name: '2019基线',
          xAxis: 62.5,
          lineStyle: {
            color: '#FF8C00',
            type: 'dashed'
          },
          label: {
            formatter: '2019基线: {c}%',
            color: '#FF8C00',
            fontSize: 10
          }
        }
      ]
    }
  };

  chart.setOption(option);
};

// 监听窗口大小变化
const handleResize = () => {
  chart && chart.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (chart) {
    chart.dispose();
    chart = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>

<style scoped>
.health-progress-chart {
  width: 100%;
  height: 100%;
  background-color: #001432;
}
</style>